<template>
	<view>
		
		<view>
			<input placeholder="输入用户名" v-model="username"/>
			<input placeholder="输入密码" v-model="password"/>
			<input placeholder="验证码" v-model="codekey"/>
			<view class="code" @click="onClick">
				<image :src="codeimg"></image>
			</view>
			
		</view>
		<button @click="login">登录</button>
		<!-- 获取到token -->
		<view>
			token:{{token}}
		</view>
		<!-- <view class="user">
			<view>username:{{username}}</view>
			<view>password:{{password}}</view>
			<view>codekey:{{codekey}}</view>
			<view>key:{{key}}</view>
		</view> -->
		<view>----------------</view>
		<button @click="Etoken">拿取token发起渲染请求</button>
		<!-- 初步渲染 -->
		<view class="box" v-for ="item in resdata" :key="item.id">
			<view class="usrname">用户名：{{item.userName}}</view>
			<view class="usrimg">
				<image :src="usrimg"></image>
			</view>
			<view class="phone">电话：{{item.userPhone}}</view>
			<view class="browse">浏览记录：{{item.userRecord}}</view>
		</view>
		
		
	</view>
</template>

<script setup>
import {ref} from "vue"
// 定义接取数据
const resdata=ref({});
// 定义login后请求用户
const loginusrname=ref("");
const phone=ref();
const browse=ref();
const usrimg=ref("");
// 
const username=ref("");
const password=ref("");
const codekey=ref("");
const key="1231";
const token=ref("");
// 进行json格式转换
const res=ref({});
// 验证码图片
const codeimg=ref('');
username.value="admin"
password.value="123456";
// 定义解析函数
const parseResponseData=(data)=> {
  if (
    typeof data === 'string' &&
    /^[\{\[].*/.test(data)
  ) {
    try {
      return JSON.parse(data);
    } catch (error) {
      console.error('解析响应数据为JSON失败:', error);
      throw new Error('Invalid JSON response'); // 抛出自定义异常
    }
  }

  return data; // 如果不需要解析，直接返回原数据
}
const onClick=()=>{
	// 定义key值
	
	// 发起请求
	uni.showToast({
		title:"发起验证码请求",
		icon:"none"
	})
	
	uni.request({
	 url: `http://129.204.87.250:8080/jeecg-boot/sys/randomImage/${key}`,
		method:"GET",
		header:{
			'X-Access-Token':"hh"
		},
		success:(res)=>{
			console.log(res.data)
			codeimg.value=res.data.result
		}
	})
}
const login=()=>{
	uni.request({
		url:"http://129.204.87.250:8080/jeecg-boot/sys/login",
		method:"POST",
		// 定义请求参数
		data:{
			captcha:codekey.value,
			checkKey:key,
			password:password.value,
			username:username.value
			
		},
		header:{
			'X-Access-Token':"hh"
		},
		success:(res)=>{
			// 进行js数据转换
			// const data=JSON.parse(res)
			const res1=parseResponseData(res);
			console.log("res1:",res1)
			console.log("res1.data:",res1.data)
			console.log("login1:",res1.data.code)
			console.log("login2:",res1.data.message)
			console.log("login3:",res1.data.result.token)
			token.value=res1.data.result.token
			// token.value=res.result.token;
		}
	})
}

// 当拿取token发送请求
const Etoken=()=>{
	// 发起请求
	uni.request({
		url:"http://129.204.87.250:8080/jeecg-boot/moyunUser/moyunUser/list",
		method:"GET",
		header:{
			'X-Access-Token':token.value
		},
		success: (res) => {
			const res1=parseResponseData(res);
			resdata.value=res1.data.result.records
			
			
		}
	})
}

</script>

<style>
input{
	width:500rpx;
	height:100rpx;
	border-bottom: 1rpx  solid #000;
}
.box{
	width: 400rpx;
	height: 100rpx;
	border-radius: 40rpx;
	border-bottom: 1rpx solid #000;
}
</style>
